<template>
  <view class="my-container">
    <!-- 个人信息区域 -->
    <view class="user-info">
      <!-- 头像 -->
      <image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
      <!-- 姓名和学号 -->
      <view class="user-detail">
        <text class="user-name">韦梦丹</text>
        <text class="student-id">学号：2531010120144</text>
      </view>
    </view>

    <!-- 分割线 -->
    <view class="divider"></view>

    <!-- 设置列表区域 -->
    <view class="setting-list">
      <view class="setting-item">
        <text class="setting-text">我的收藏</text>
        <image class="arrow-icon" src="/static/arrow-right.png" mode="widthFix"></image>
      </view>
      <view class="setting-item">
        <text class="setting-text">联系客服</text>
        <image class="arrow-icon" src="/static/arrow-right.png" mode="widthFix"></image>
      </view>
      <view class="setting-item">
        <text class="setting-text">账户安全</text>
        <image class="arrow-icon" src="/static/arrow-right.png" mode="widthFix"></image>
      </view>
      <view class="setting-item">
        <text class="setting-text">关于我们</text>
        <image class="arrow-icon" src="/static/arrow-right.png" mode="widthFix"></image>
      </view>
      <view class="setting-item logout-item">
        <text class="logout-text">退出登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
// 静态页面，无逻辑处理
</script>

<style scoped>
.my-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 个人信息样式 */
.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #eee;
}

.user-detail {
  margin-left: 16px;
}

.user-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.student-id {
  font-size: 14px;
  color: #666;
}

/* 分割线 */
.divider {
  width: 100%;
  height: 10px;
  background-color: #f5f5f5;
}

/* 设置列表样式 */
.setting-list {
  background-color: #fff;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.setting-text {
  font-size: 16px;
  color: #333;
}

.arrow-icon {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

/* 退出登录样式 */
.logout-item {
  border-bottom: none;
}

.logout-text {
  font-size: 16px;
  color: #ff4d4f;
}
</style>